<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        .kuang{
            width: 400px;
            /*border: 1px red solid;*/
            height: 400px;
            margin: 5vh auto 0px;
        }
        .but{
            width: 80px;
            height: 40px;
            background-color: aqua;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
            margin: 60px 0px 0px 240px;
        }
        .cang{
            display: none;
        }
    </style>
</head>
<body>
<div class="kuang">
    <video id="video" width="400px" height="400px" autoplay></video>
    <canvas id="canvas" class="cang" width="400px" height="400px"></canvas>
</div>
<button onclick="query()" class="but">登录</button>
</body>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
    var video=document.getElementById("video");
    var context=canvas.getContext("2d");
    var con={
        audio:false,
        video:{
            width:400,
            height:400
        }
    }
    navigator.mediaDevices.getUserMedia(con)
        .then(function (stream) {
            video.src=window.URL.createObjectURL(stream);
            video.onloadedmetadata=function (ev) {
                video.play();
            }
        }).catch(function (err) {
            console.log(err.name+" 信息："+err.message);
    })

    /**
     * 发送到后台
     */

    function query() {
        context.drawImage(video,0,0,400,400);
        var zhi=getBase64();
        console.log(zhi);
        alert(zhi);
        $.ajax({
            type: "post",
            url:"/loginpage/login",
            data:{
                imageForBase64:zhi
            },

            success:function (msg) {
                alert("对比结果："+JSON.stringify(msg));
                console.log("对比的结果：："+JSON.stringify(msg))
            }
        })
    }
    
    function getBase64() {
        var imgSrc=document.getElementById("canvas").toDataURL("image/png");
        return imgSrc.split("base64,")[1];
    }

</script>
</html>